<template>
	<view class="map-container" :style="{'height':clientHeight+'px'}">
		<u-navbar bgColor="rgba(255, 255, 255,0)" leftIcon="/">
			<view class="" slot="left">
				<view class="navbar-left">
					<u-icon name="arrow-left" size="18" label="返回"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="map" :style="{'height':clientHeight+'px'}">
			<zhmap ref="liuEasyMap" :centerLat="'36.05709'" :centerLng="'103.82538'" :scale="14"
				:markerData="markerData" :polygons="polygons" @clickMarker="markerClick"></zhmap>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				initMap:{
					id: 0, // 使用 marker点击事件 需要填写id
					title: 'map',
					latitude: 39.909,
					longitude: 116.39742,
					covers: [{
						latitude: 39.909,
						longitude: 116.39742,
						iconPath: '../../../static/location.png'
					}, {
						latitude: 39.90,
						longitude: 116.39,
						iconPath: '../../../static/location.png'
					}]
				},
				clientHeight:0,
				markerData: [{
						id: 1,
						name: '兰州市政府', //标记点展示名字
						alpha:0,
						address: '甘肃省兰州市城关区人民政府',
						latitude: '36.05989', //标记点纬度
						longitude: '103.83502', //标记点经度
						markerUrl: 'https://img0.baidu.com/it/u=550544800,2229099292&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', //标记点图标地址
						iconWidth: 32, //标记点图标宽度
						iconHeight: 32, //标记点图标高度
						calloutColor: '#ffffff', //气泡窗口 文本颜色
						calloutFontSize: 14, //气泡窗口 文本大小
						calloutBorderRadius: 6, //气泡窗口 边框圆角
						calloutPadding: 8, //气泡窗口 文本边缘留白
						calloutBgColor: '#0B6CFF', //气泡窗口 背景颜色
						calloutDisplay: 'ALWAYS', //气泡窗口 展示类型 默认常显 'ALWAYS' 常显 'BYCLICK' 点击显示
					}, {
						id: 2,
						name: '测试地址', //标记点展示名字
						address: '测试地址详细地址测试地址详细地址测试地址详细地址测试地址详细地址',
						latitude: "36.05064",
						longitude: "103.82538"
					}],
					//展示区域点位信息 也就是根据多个点进行多边形进行绘制
					// polygons: [{
					// 	points: [{
					// 		latitude: "36.06637",
					// 		longitude: "103.82471"
					// 	}, {
					// 		latitude: "36.06255",
					// 		longitude: "103.82321"
					// 	}, {
					// 		latitude: "36.06234",
					// 		longitude: "103.81928"
					// 	}, {
					// 		latitude: "36.06036",
					// 		longitude: "103.82175"
					// 	}, {
					// 		latitude: "36.05653",
					// 		longitude: "103.82152"
					// 	}, {
					// 		latitude: "36.05953",
					// 		longitude: "103.82476"
					// 	}, {
					// 		latitude: "36.05690",
					// 		longitude: "103.82785"
					// 	}, {
					// 		latitude: "36.06023",
					// 		longitude: "103.82747"
					// 	}, {
					// 		latitude: "36.06243",
					// 		longitude: "103.83014"
					// 	}, {
					// 		latitude: "36.06245",
					// 		longitude: "103.82616"
					// 	}],
					// 	strokeWidth: 2,
					// 	strokeColor: "#FF000060",
					// 	fillColor: "#FF000090"
					// }]
			}
		},
		methods: {
			//获取可视区域高度
			getClineHeight(){
				const res = uni.getSystemInfo({
					success:(res=>{
						this.clientHeight = res.screenHeight
					})
				});
			},
			//点击标记点
			markerClick(item) {
				//拿到当前点击的标记点，数据对象，写自己的业务逻辑
				//例如 展示详情弹层、导航等
				console.log(item)
			}
		},
		onLoad() {
			this.getClineHeight()
		}
	}
</script>

<style scoped lang="scss">
.navbar-left{
	width: 120rpx;
	height: 40rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.3);
}
.map-container {
  width: 100%;
}
.map {
	width: 100%;
	height: 100%;
}
</style>
